<template>
	<el-dialog title="登录验证" v-model="dialogVisible" center width="520" :before-close="handleClose">
		<div class="p20">
			<el-form @submit.prevent ref="userRef" :model="loginForm" :rules="loginRules" class="">
				<el-form-item prop="username" style="margin-bottom: 25px;">
					<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off"
						placeholder="请输入登录账号" class="pl-10" />
				</el-form-item>
				<el-form-item prop="code">
					<el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="请获取手机验证码"
						style="width: 334px;" />
					<button class="codeBtn main-color" :disabled="isCounting" @click="getCaptcha">
						{{ isCounting ? `${countdown}秒` : '获取验证码' }}
					</button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer text-right mt30">
				<el-button class="cancelSubBtn" @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmUser()" 
				class="mainSubBtn">确 定</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {
		captchaSms
	} from "@/api/login";
	export default {
		data() {
			return {
				dialogVisible: false,
				loginForm: {
					username: '',
					code: '',
					uuid:'',//验证码唯一识别码
				},				
				loginRules: {
					username: [{
							required: true,
							trigger: "blur",
							message: "请输入您的账号"
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号码',
							trigger: 'blur',
						},
					],
					code: [{
						required: true,
						trigger: "change",
						message: "请输入验证码"
					}, ]
				},
				countdown: 60, //60秒
				isCounting: false, //获取验证码点击禁用
				time:'',
			}
		},
		created() {
			
		},
		methods: {
			open(){
				this.dialogVisible = true
			},
			handleClose() {
				this.dialogVisible = false
			},
			//信息重置
			reset(){
				this.loginForm = {
					username: '',
					code: ''
				}
			},
			//获取验证码
			getCaptcha() {
				const regex = /^1[3-9]\d{9}$/
				if (this.loginForm.username == '') {
					this.$modal.msgError("请输入手机号");
					return false;
				} else if (regex.test(this.loginForm.username) == false) {
					this.$modal.msgError("手机号格式错误");
					return false;
				}
				captchaSms({
					phone: this.loginForm.username
				}).then(res => {
					if(res.code == 200){
						this.$modal.msgSuccess('已发送')
						this.loginForm.uuid = res.uuid
						this.startCountdown();
					}
				})
			},
			//倒计时
			startCountdown() {
				this.isCounting = true;
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown -= 1;
					} else {
						clearInterval(this.timer);
						this.isCounting = false;
						this.countdown = 60; 
					}
				}, 1000);
			},
			confirmUser() {
				this.$refs['userRef'].validate(valid => {
					if (valid) {
						let data = {
							username:this.loginForm.username,
							uuid:this.loginForm.uuid,
							code:this.loginForm.code
						}
						this.$emit('handleLogin',data)
					}
				})	
			}
		}
	}
</script>

<style>
	.codeBtn{
		    width: 100px;
		    height: 38px;
		    line-height: 38px;
		    text-align: center;
		    border-radius: 6px;
		    float: right;
		    border: 1px solid #4DACB1;
		    margin-left: 14px;
		    cursor: pointer;
		    background: #fff;
	}
</style>